<template>
  <div class="chart-container">
    <Tab :tabs="tabs" @tabClick="handleTabEmit"></Tab>
    <div class="chart-block" :style="{height: blockHeight[index] + 'px'}">
      <div class="chart-container">
        <div class="chart" :class="index === 0 ? 'active' : ''">
          <div class="chart min-height" id="main"></div>
        </div>
      </div>
      <div class="chart-container">
        <div class="chart" id="fee" :class="index === 1 ? 'active' : ''"></div>
      </div>
      <div class="chart-container">
        <div class="chart vertical-inline" id="profit" :class="index === 2 ? 'active' : ''"></div>
      </div>
      <Report :height="blockHeight[blockHeight.length - 1]" class="chart high-height" :class="index === 3 ? 'active' : ''"></Report>
    </div>
  </div>
</template>

<script>
import Tab from './Tab'
import util from '../utils/common'
import Report from './ESReport'

export default {
  name: 'FeeChart',
  props: {
    loadData: {
      type: Array
    },
    totalFee: {
      type: Array
    },
    profit: {
      type: Array
    }
  },
  data () {
    return {
      tabs: ['峰平谷(kw)', '电费', '收益', '总报告'],
      index: 0,
      blockHeight: [380, 600, 600, 1000],
      loadChart: {},
      profitChart: {},
      feeChart: {},
      loadOpt: {},
      feeOpt: {},
      profitOpt: {}
    }
  },
  methods: {
    handleTabEmit (index) {
      this.index = index
      this.loadChart.clear()
      this.feeChart.clear()
      this.profitChart.clear()
      if (index === 0) {
        this.loadChart.setOption(this.loadOpt)
      } else if (index === 1) {
        this.feeChart.setOption(this.feeOpt)
      } else if (index === 2) {
        this.profitChart.setOption(this.profitOpt)
      }
    }
  },
  mounted () {
    const echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/bar')
    require('echarts/lib/chart/line')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/legend')
    this.loadChart = echarts.init(document.getElementById('main'))
    this.feeChart = echarts.init(document.getElementById('fee'))
    this.profitChart = echarts.init(document.getElementById('profit'))
  },
  watch: {
    loadData () {
      const highFee = []
      const flatFee = []
      const lowFee = []
      const isMobile = util.isMobile()
      for (const data of this.loadData) {
        highFee.push(data.high_fee)
        flatFee.push(data.flat_fee)
        lowFee.push(data.low_fee)
      }
      this.loadOpt = {
        title: {
          text: '峰平谷用电量(kwh)'
        },
        tooltip: {
          trigger: isMobile ? 'none' : 'axis',
          triggerOn: isMobile ? 'none' : 'mousemove|click',
          formatter: params => {
            let str = params[0].name + '峰平谷用电量<br>'
            for (const item of params) {
              str += item.marker
              str += item.seriesName + ':' + item.data + '度<br>'
            }
            return str
          }
        },
        legend: {
          data: ['高峰用电', '平段用电', '低谷用电'],
          top: '30'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisPointer: {
            value: '1月',
            handle: {
              show: isMobile
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '15%',
          containLabel: true
        },
        series: [
          {
            name: '高峰用电',
            type: 'line',
            data: highFee,
            itemStyle: {
              color: 'red'
            }
          },
          {
            name: '平段用电',
            type: 'line',
            data: flatFee,
            itemStyle: {
              color: 'orange'
            }
          },
          {
            name: '低谷用电',
            type: 'line',
            data: lowFee,
            itemStyle: {
              color: 'green'
            }
          }
        ]
      }
      this.loadChart.setOption(this.loadOpt)
    },
    totalFee () {
      this.feeOpt = {
        title: {
          text: '每月电费(元)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            return params[0].name + '电费' + params[0].data + '元'
          }
        },
        legend: {
          data: ['电价'],
          top: '30'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
        series: [
          {
            name: '电价',
            type: 'bar',
            data: this.totalFee,
            label: {
              show: true,
              position: 'right'
            }
          }
        ]
      }
      this.feeChart.setOption(this.feeOpt)
    },
    profit () {
      const kwh = []
      const prof = []
      for (const item of this.profit) {
        kwh.push(item[0])
        prof.push(item[1])
      }
      this.profitOpt = {
        title: {
          text: '发电量(kW)/收益(元)',
          textAlign: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            let str = params[0].name + '<br>'
            str += params[0].marker + params[0].seriesName + ':' + params[0].data + '度<br>'
            if (params.length > 1) {
              str += params[1].marker + params[1].seriesName + ':' + params[1].data + '元'
            }
            return str
          }
        },
        legend: {
          data: ['发电量', '收益'],
          top: '30'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '发电量',
            type: 'bar',
            label: {
              show: true,
              position: 'right'
            },
            data: kwh,
            itemStyle: {
              color: '#91c7ae'
            }
          },
          {
            name: '收益',
            type: 'bar',
            label: {
              show: true,
              position: 'right'
            },
            data: prof,
            itemStyle: {
              color: '#c23531'
            }
          }
        ]
      }
      this.profitChart.setOption(this.profitOpt)
    }
  },
  components: {
    Tab,
    Report
  }
}
</script>

<style scoped>
  .chart-block {
    position: relative;
    overflow: hidden;
  }
  .chart {
    width: 90%;
    height: 600px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    top: 10px;
    background-color: #ffffff;
  }
  .chart.min-height {
    height: 360px;
  }
  .chart.report-height {
    height: 700px;
  }
  .chart.active {
    z-index: 9999;
  }
  @media screen and (max-width: 1080px) {
    .chart, .chart.vertical-inline {
      width: 100%;
    }
  }
</style>
